<template>
  <div>

    <Card v-if="$store.state.superAdmin == 'true'" style="margin-bottom:10px">
          <el-select style="width:100%" v-model="museumId" @change="getBottomExhibitionHallDropDown" filterable>
            <el-option
              v-for="item in museumList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
    </Card>

  <Card>

    <div class="flexCSB">
      <div>
        
        <div style="display: flex;align-items: center;">
          <Button style="display: block" type="primary" @click="create">新增单个展品</Button>
        </div>
        <div style="display: flex;align-items: center;margin-top:10px">
          <Upload
            :action="action"
            name="file"
            :headers="headers"
            :data="uploadData"
            :on-success="success"
            :show-upload-list="showUploadList"
            :on-progress="progress1"
            :on-error="error"
          >
            <Button style="margin-right:10px;" type="info" :loading="loading51">批量上传展品表格，进行添加展品</Button>
          </Upload>
          <a @click="download" style="font-weight:bold">没有展品表格模版？点击下载</a>
        </div>
        <div style="display: flex;align-items: center;margin-top:10px">
          <Upload
            :action="action2"
            name="file"
            :multiple="true"
            :headers="headers"
            :data="uploadData"
            :on-success="success"
            :show-upload-list="showUploadList"
            :on-progress="progress2"
            :before-upload="beforeAvatarUpload"
            :on-error="error"
          >
            <Button type="info" style="margin-right:10px" :loading="loading52">批量上传展品音频 5M以内</Button>
          </Upload>
          <a @click="text1" style="font-weight:bold">点击查看展品音频文件命名格式</a>
        </div>
        <div style="display: flex;align-items: center;margin-top:10px">
          <Upload
            :action="action3"
            name="file"
            :multiple="true"
            :headers="headers"
            :data="uploadData"
            :on-success="success"
            :show-upload-list="showUploadList"
            :on-progress="progress3"
            :on-error="error">
            <Button style="margin-right:10px" type="info" :loading="loading53">批量上传展品图片 200K以内</Button>
          </Upload>
          <a @click="text2" style="font-weight:bold">点击查看展品图片文件命名格式</a>
        </div>
        <div style="display: flex;align-items: center;margin-top:10px">
          <Button :disabled="selectList.length == 0" style="margin-right:10px" type="warning" @click="changeCengji">批量修改展品所属层级</Button>
          <Button :disabled="selectList.length == 0" style="margin-right:10px" type="error" @click="delZhanpin">批量删除展品</Button>
          <Button :disabled="selectList.length == 0" :loading="loadingCode" style="margin-right:10px" type="info" @click="ZhanpinCode">批量生成展品二维码</Button>
        </div>
      </div>
      <div>
        <div style="display: flex;align-items: center;margin-bottom:10px">
          <p style="margin-right:10px">层级：</p>

          <el-select v-model="hallId" @change="change" filterable>
            <el-option value="-1" label="全部层级"></el-option>
            <el-option
              v-for="item in exhibitionHallList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>

        </div>
        <div style="display: flex;align-items: center;margin-bottom:10px">
          <p style="margin-right:10px;min-width:45px">名称：</p>

          <Input v-model="name" @on-change="getName"></Input>

        </div>
      </div>
    </div>

    <Table @on-selection-change="onSelectionChange" class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
    <Page
    show-total
      class="page"
      :total="total"
      :current.sync="current"
      show-elevator
      @on-change="changePage"
    />

    <Modal width="50" title="展品操作" v-model="modal">
      <Form ref="form" :model="newData" :label-width="120">
        <FormItem label="展品名称：">
          <Input placeholder="请输入展品名称" v-model="newData.name" clearable></Input>
        </FormItem>
        <FormItem label="展品编号：">
          <Input placeholder="请输入展品编号，比如 zgbwg001（中国博物馆001）" v-model="newData.serialNumber" clearable></Input>
        </FormItem>
        <FormItem label="展品材质：">
          <el-select style="width:100%" placeholder="请选择展品材质" v-model="newData.material" filterable>
            <el-option
              v-for="item in materialList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </FormItem>
        <FormItem label="是否精品推荐：">
          <el-select style="width:100%" placeholder="请选择" v-model="newData.recommend" filterable>
            <el-option
              v-for="item in recommendedList"
              :key="item"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </FormItem>
        <FormItem label="展品年代：">
          <el-select style="width:100%" placeholder="请选择展品年代" v-model="newData.decade" filterable>
            <el-option
              v-for="item in decadeList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </FormItem>
        <FormItem label="所属展厅：">
          <Select placeholder="请选择所属展厅" v-model="newData.exhibitionHallId">
            <template v-for="item in exhibitionHallList">
              <Option :value="item.id">{{item.name}}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="展品简介：">
          <Input
            placeholder="请输入展品简介"
            :rows="10"
            maxlength="5000"
            show-word-limit
            type="textarea"
            v-model="newData.about"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="展品封面：">
          <vue-uploadimg :imgUrl="imgurl1" :clear="clear1" @uploadImg="uploadImg1"></vue-uploadimg>
        </FormItem>
        <FormItem label="其他图库：">
          <vue-uploadimgmore :imgUrl="imgurl2" :clear="clear2" @uploadImg="uploadImg2"></vue-uploadimgmore>
        </FormItem>
        <Divider>非必填</Divider>
        <FormItem label="英文名称：">
          <Input placeholder="请输入英文名称" v-model="newData.nameEn" clearable></Input>
        </FormItem>
        <FormItem label="英文简介：">
          <Input
            placeholder="请输入英文简介"
            :rows="10"
            maxlength="5000"
            show-word-limit
            type="textarea"
            v-model="newData.aboutEn"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="展品尺寸：">
          <Input placeholder="请输入展品尺寸 例如：300*300" v-model="newData.dimension" clearable></Input>
        </FormItem>
        <FormItem label="展品位置：">
          <Input placeholder="请输入展品位置 例如：1号馆 / 1号厅 / 1号展区 / 1号展位" v-model="newData.exhibitLocation" clearable></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="warning" class="Button" @click="modal = false">关闭</Button>
        <Button type="primary" class="Button" @click="submit" :loading="loading2">提交</Button>
      </div>
    </Modal>

    <Modal v-model="musicModal" :title="'展品音频（ '+title+' ）'" width="80">
      <Button type="success" class="Button" @click="addMusic">新增音频</Button>
      <Table class="table" :loading="loading3" highlight-row :columns="columns2" :data="data2"></Table>
      <div slot="footer"></div>
    </Modal>

    <Modal title="试听音频" v-model="listenModal">
      <audio style="width:100%" controls :src="prefix + listenUrl"></audio>
      <div slot="footer">
        <Button type="warning" class="Button" @click="listenModal = false">关闭</Button>
      </div>
    </Modal>

    <Modal title="音频操作" v-model="createModal" width="50">
      <Form ref="form" :model="musicData" :label-width="100">
        <FormItem label="音频标题：">
          <Input placeholder="请输入音频标题" v-model="musicData.audioName" clearable></Input>
        </FormItem>
        <FormItem label="语言类型：">
          <Select v-model="musicData.audioLang" placeholder="请选择语言类型">
            <template v-for="item in audioLangList">
              <Option :value="item.id">{{item.name}}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="上传音频：">
          <vue-uploadaudio :audioUrl="audioUrl1" :clear="clear4" musicId="music1" @uploadAudio="uploadAudio1" @audioLength="audioLength1"></vue-uploadaudio>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" :loading="loading6" class="Button" @click="submitMusic">立即提交</Button>
      </div>
    </Modal>

    <Modal title="查看图片" v-model="modelImg">
      <img style="width:100%" :src="modelImgSrc"></img>
      <div slot="footer">
        <Button type="warning" class="Button" @click="modelImg = false">关闭</Button>
      </div>
    </Modal>

    <Modal title="批量修改展品所属层级" v-model="modalCengji">
      <el-select style="width:100%" v-model="pilianghallId" filterable>
        <el-option
          v-for="item in exhibitionHallList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div slot="footer">
        <Button type="warning" class="Button" @click="modalCengji = false">关闭</Button>
        <Button type="primary" class="Button" @click="submitCengji" :loading="loadingCengji">提交</Button>
      </div>
    </Modal>

    <!-- <Modal v-model="lanModal" :title="'多语言版本（ '+title+' ）'" width="80">
      <Button type="success" class="Button" @click="addLan">新增多语言版本</Button>
      <Table class="table" :loading="loading7" highlight-row :columns="columns3" :data="data3"></Table>
      <div slot="footer"></div>
    </Modal> -->

  </Card>
</div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading51: false,
      loading52: false,
      loading53: false,
      loading7: false,
      loading8: false,
      loadingCengji: false,
      loadingCode: false,
      recommendedList:[
        {
          id:'true',
          name:'是'
        },
        {
          id:'false',
          name:'否'
        }
      ],
      modelImg: false,
      modelImgSrc: '',

      lanModal: false,
      data3: [],
      columns3: [],

      columns: [
        {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: "left"
                    },
        {
          title: "展品名称",
          key: "name",
          align: "center",
          minWidth: 200,
          fixed: "left"
        },
        // {
        //   title: "展品ID",
        //   key: "id",
        //   align: "center",
        //   minWidth: 100
        // },
         {title:'是否精品推荐', align: 'center',minWidth: 200,
		            	render: (h, params) => {
							 let color = "";
							 let content = "";
							 if (String(params.row.recommend)=="true") {
							 	color = "blue";
								 content="是"
							 }
							 if (String(params.row.recommend)=="false") {
								 color = "red";
								 content = "否"
							}
		              		return h(
							 "Tag",
							 {
								 props: {  color: color },
							 },
							 	content
							);
		           	 	}
		          	},
        { title: "展品编号", key: "serialNumber", align: "center", minWidth: 200},
        {
          title: "所属展厅",
          key: "exhibitionHallId2",
          align: "center",
          minWidth: 300
        },
        {
          title: "展品封面",
          key: "mainPic",
          align: "center",
          minWidth: 200,
          render: (h, params) => {
            return h("img", {
              style: {
                width: "50px",
              },
              attrs: {
                src: this.prefix + params.row.mainPic
              },
              on: {
                click:() =>{
                  this.lookImg(params.row.mainPic)
                }
              }
            });
          }
        },
        {
          title: "展品图库",
          key: "pics",
          align: "center",
          minWidth: 200,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                 display: 'flex',
                 justifyContent: 'center',
                 flexWrap: 'wrap'
                }
              },
              params.row.pics.map(v => {
                return h("img", {
                  style: {
                    width: "50px",
                    height: '50px',
                    margin: '10px',
                  },
                  attrs: {
                    src: this.prefix + v
                  },
                  on: {
                    click:() =>{
                      this.lookImg(params.row.mainPic)
                    }
                  }
                });
              })
            );
          }
        },
        { title: "展品尺寸", key: "dimension", align: "center", minWidth: 200 },
        { title: "展品材质", key: "material", align: "center", minWidth: 200 },
        { title: "展品年代", key: "decade", align: "center", minWidth: 200 },
        { title: "展品位置", key: "exhibitLocation", align: "center", minWidth: 200 },
        { title: "展品简介", key: "about", align: "center", minWidth: 1000 },
        {
          title: "英文名称",
          key: "nameEn",
          align: "center",
          minWidth: 200,
        },
        { title: "英文简介", key: "aboutEn", align: "center", minWidth: 1000 },
        {
          title: "操作",
          align: "center",
          minWidth: 120,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  padding: "5px 0"
                }
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      loading: this.loading3
                    },
                    style: {
                      display: "block",
                      "margin-left": "5px"
                    },
                    on: {
                      click: () => {
                        this.music(params);
                      }
                    }
                  },
                  "音频"
                ),
                // h(
                //   "Button",
                //   {
                //     props: {
                //       type: "info",
                //     },
                //     style: {
                //       display: "block",
                //       "margin": "10px 0 10px 5px"
                //     },
                //     on: {
                //       click: () => {
                //         this.muchLan(params);
                //       }
                //     }
                //   },
                //   "多语言"
                // ),
                h(
                  "Button",
                  {
                    props: {
                      type: "warning"
                    },
                    style: {
                      display: "block",
                      margin: "10px 0 10px 5px"
                    },
                    on: {
                      click: () => {
                        this.update(params);
                      }
                    }
                  },
                  "修改"
                ),
                h(
                  "Button",
                  {
                    props: { type: "error" },
                    style: {
                      display: "block",
                      "margin-left": "5px"
                    },
                    on: {
                      click: () => {
                        this.del(params);
                      }
                    }
                  },
                  "删除"
                )
              ]
            );
          }
        }
      ],
      data: [],
      total: 0,
      current: 1,
      size: 10,
      hallId: '-1',
      states: 0,
      museumId: "",
      museumList: [],

      modal: false,
      newData: {
        about: "",
        aboutEn: "",
        dimension: "",
        exhibitionHallId: "",
        mainPic: "",
        material: "",
        name: "",
        nameEn: "",
        pics: [],
        serialNumber: '',
        decade: '',
        exhibitLocation: '',
        recommend:''
      },
      id: "",
      exhibitionHallList: [],

      imgurl1: "",
      clear1: true,
      imgurl2: [],
      clear2: true,

      selectList: [],
      modalCengji: false,
      pilianghallId: '',
      name: '',

      musicModal: false,
      columns2: [
        { title: "音频名称", key: "audioName", align: "center" },
        { title: "语言类型", key: "audioLang2", align: "center" },
        { title: "播放次数", key: "listenNumber", align: "center" },
        { title: "音频时长", key: "audioDuration2", align: "center" },
        {
          title: "操作",
          align: "center",
          width: 300,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success"
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.listen(params);
                    }
                  }
                },
                "试听"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning"
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.listenChange(params);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error"
                  },
                  on: {
                    click: () => {
                      this.delMusic(params);
                    } 
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data2: [],
      listenModal: false,
      listenUrl: "",

      processingExhibitsModal: true,
      uploadData: {
        museumId: ""
      },
      headers: {
        token: localStorage.getItem("token")
      },
      showUploadList: false,
      action: "",
      action2: "",
      action3: "",

      title: '',
      exhibitsId: '',
      createModal: false,
      musicData:{
        audioDuration: 0,
        audioLang: "",
        audioName: "",
        audioUrl: "",
      },
      audioUrl1:'',
      clear4: true,
      loading6: false,
      audioLangList: [
        {
          name: '中文',
          id: 'Chinese'
        },
        {
          name: '英文',
          id: 'English'
        },
        {
          name: '韩文',
          id: 'Korean'
        },
        {
          name: '日文',
          id: 'Japanese'
        }
      ],
      materialList:[
        '陶瓷',
        '铜器',
        '玉石',
        '漆器',
        '珐琅',
        '竹木牙角',
        '纺织品',
        '金银锡',
        '玻璃器',
        '纸',
        '其他',
      ],
      decadeList: [
        '新石器',
        '夏',
        '商',
        '西周',
        '春秋',
        '战国',
        '秦',
        '汉',
        '三国',
        '晋',
        '南北朝',
        '隋',
        '唐',
        '五代',
        '辽',
        '宋',
        '金',
        '元',
        '明',
        '清',
        '近代',
        '当代',
      ],

      musicModalId: '',




    }
  },
  created() {
    this.action = this.baseUrl + "/stage/exhibits/saveExhibitsBatch";
    this.action2 = this.baseUrl + "/stage/exhibits/saveExhibitsAudioBatch";
    this.action3 = this.baseUrl + "/stage/exhibits/uploadBatchPic";
    // this.action = this.baseUrl + "/stage/batch/processingExhibits";
    if (this.$store.state.superAdmin == "true") {
      this.getMuseumList();
    } else {
      this.museumId = this.$store.state.museumId;
      this.uploadData.museumId = "";
      this.getBottomExhibitionHallDropDown();
    }
  },
  methods: {
    // 获取展厅列表

    getBottomExhibitionHallDropDown() {
      this.uploadData.museumId = this.museumId
      this.$http(
        "/stage/hall/getBottomExhibitionHallDropDown",
        {
          museumId: this.museumId
        },
        "get",
        res => {
          if (res.data.code == 200) {
            this.current = 1
            this.hallId = '-1'
            this.exhibitionHallList = res.data.data;
            this.getData();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    // 获取博物馆列表
    getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          // this.museumId = '3728'
          this.museumId = this.museumList[0].id;
          this.uploadData.museumId = this.museumList[0].id;
          this.getBottomExhibitionHallDropDown();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    getName(){
      this.current = 1
      this.getData()
    },
    getData() {
      this.selectList = []
      this.loading1 = true;
      this.$http(
        "/stage/exhibits/getExhibits",
        {
          museumId: this.museumId,
          current: this.current,
          hallId: this.hallId == '-1' ? "" : this.hallId,
          size: this.size,
          name: this.name,
          states: this.states
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.data = res.data.data.records;
            for (let i = 0; i < this.data.length; i++) {
              for (let j = 0; j < this.exhibitionHallList.length; j++) {
                if (
                  this.data[i].exhibitionHallId == this.exhibitionHallList[j].id
                ) {
                  this.data[i].exhibitionHallId2 = this.exhibitionHallList[j].name;
                }
              }
              if (this.data[i].pics != undefined) {
                this.data[i].pics = this.data[i].pics.split(",");
              } else {
                this.data[i].pics = [];
              }
            }
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    change() {
      this.current = 1;
      this.getData();
    },
    create() {
      this.id = "";
      this.modal = true;
      this.newData = {
        about: "",
        aboutEn: "",
        dimension: "",
        exhibitionHallId: "",
        mainPic: "",
        material: "",
        name: "",
        nameEn: "",
        pics: [],
        serialNumber: '',
        decade: '',
        exhibitLocation: '',
        recommend:'false'
      };
      this.imgurl1 = "";
      this.clear1 = !this.clear1;
      this.imgurl2 = [];
      this.clear2 = !this.clear2;
      this.audioUrl1 = ''
      this.clear4 = !this.clear4
    },
    // 汉语音频
    uploadAudio1(data){
      this.musicData.audioUrl = data
    },
    // 音频长度
    audioLength1(data){
      this.musicData.audioDuration = data
    },
    update(params) {
      this.modal = true;
      this.newData = {
        about: params.row.about,
        aboutEn: params.row.aboutEn,
        dimension: params.row.dimension,
        exhibitionHallId: params.row.exhibitionHallId,
        mainPic: params.row.mainPic,
        material: params.row.material,
        name: params.row.name,
        nameEn: params.row.nameEn,
        pics: params.row.pics,
        serialNumber: params.row.serialNumber,
        decade: params.row.decade,
        exhibitLocation: params.row.exhibitLocation,
        recommend:String(params.row.recommend)
      };
      this.id = params.row.id;
      this.imgurl1 = params.row.mainPic;
      this.imgurl2 = [];
      for (let i = 0; i < params.row.pics.length; i++) {
        this.imgurl2.push({
          name: params.row.pics[i],
          url: params.row.pics[i]
        });
      }
      this.clear2 = !this.clear2;
    },
    submit() {
      if (this.newData == "") {
        this.$Message.error("");
        return false;
      }
      this.loading2 = true;
      if (this.id == "") {
        this.$http(
          "/stage/exhibits/saveExhibits",
          {
            about: this.newData.about,
            aboutEn: this.newData.aboutEn,
            dimension: this.newData.dimension,
            exhibitionHallId: this.newData.exhibitionHallId,
            mainPic: this.newData.mainPic,
            material: this.newData.material,
            name: this.newData.name,
            nameEn: this.newData.nameEn,
            pics: this.newData.pics,
            serialNumber: this.newData.serialNumber,
            museumId: this.museumId,
            decade: this.newData.decade,
            exhibitLocation: this.newData.exhibitLocation,
            recommend:this.newData.recommend
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.modal = false;
              this.$Message.success("新增展品成功");
              this.getData();
            } else {
              this.$Message.error(res.data.msg);
            }
            this.loading2 = false;
          }
        );
      } else {
        this.$http(
          "/stage/exhibits/updateExhibits",
          {
            id: this.id,
            about: this.newData.about,
            aboutEn: this.newData.aboutEn,
            dimension: this.newData.dimension,
            exhibitionHallId: this.newData.exhibitionHallId,
            mainPic: this.newData.mainPic,
            material: this.newData.material,
            name: this.newData.name,
            nameEn: this.newData.nameEn,
            pics: this.newData.pics,
            serialNumber: this.newData.serialNumber,
            museumId: this.museumId,
            decade: this.newData.decade,
            exhibitLocation: this.newData.exhibitLocation,
            recommend:this.newData.recommend
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.modal = false;
              this.$Message.success("修改展品成功");
              this.getData();
            } else {
              this.$Message.error(res.data.msg);
            }
            this.loading2 = false;
          }
        );
      }
    },
    del(params) {
      this.$Modal.confirm({
        title: "提示",
        content:
          "<p>确定要删除展品<strong> " + params.row.name + " </strong>吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/exhibits/deleteExhibits",
            {
              id: params.row.id
            },
            "get",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("删除展品成功");
                this.current = 1;
                this.getData();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {}
      });
    },
    uploadImg1(data) {
      this.newData.mainPic = data;
    },
    uploadImg2(data) {
      this.newData.pics = [];
      for (let i = 0; i < data.length; i++) {
        this.newData.pics.push(data[i].url);
      }
    },
    changePage(data) {
      this.current = data;
      this.getData();
      this.selectList = []
    },
    music(params) {
      this.loading3 = true;
      this.title = params.row.name
      this.exhibitsId = params.row.id
      this.$http("/stage/exhibits/getExhibitsAudios",{
          exhibitsId: params.row.id
        },"get",res => {
          if (res.data.code == 200) {
            this.musicModal = true;
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].audioDuration2 = res.data.data[i].audioDuration + "s";
              if(res.data.data[i].audioLang == 'Chinese'){res.data.data[i].audioLang2 = '中文'}
              if(res.data.data[i].audioLang == 'English'){res.data.data[i].audioLang2 = '英文'}
              if(res.data.data[i].audioLang == 'Japanese'){res.data.data[i].audioLang2 = '日文'}
              if(res.data.data[i].audioLang == 'Korean'){res.data.data[i].audioLang2 = '韩文'}
            }
            this.data2 = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading3 = false;
        }
      );
    },
    listen(params) {
      this.listenModal = true;
      this.listenUrl = params.row.audioUrl;
    },
    download(){
      window.location.href = 'https://museum-voice.bowu66.com/template/exhibit_template.xlsx'
    },
    // download() {
    //   this.loading4 = true;
    //   let that = this;
    //   axios({
    //     method: "get",
    //     url: this.baseUrl + "/stage/file/downloadExhibitTemplate",
    //     headers: {
    //       token: this.$store.state.token || localStorage.getItem("token") || "",
    //       "Content-Type": "application/json;charset=UTF-8"
    //     },
    //     responseType: "blob",
    //     params: {}
    //   })
    //     .then(function(res) {
    //       that.loading4 = false;
    //       // let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);
    //       var data = res.data;
    //       var downloadElement = document.createElement("a");
    //       var href = window.URL.createObjectURL(data); //创建下载的链接
    //       downloadElement.href = href;
    //       downloadElement.download = "批量导入.xls"; //下载后文件名
    //       document.body.appendChild(downloadElement);
    //       downloadElement.click(); //点击下载
    //       document.body.removeChild(downloadElement); //下载完成移除元素
    //       window.URL.revokeObjectURL(href); //释放掉blob对象
    //     })
    //     .catch(resp => {
    //       that.loading4 = false;
    //       that.$Message.error("下载失败");
    //     });
    // },
    success(data) {
      if(data.code == 200){
        this.$Message.success("上传成功");
        this.getData()
      }else{
        // this.$Message.error(data.msg);

        this.$Notice.open({
            title: '上传失败',
            desc: data.msg,
            duration: 0
        });
      }
      this.loading51 = false;
      this.loading52 = false;
      this.loading53 = false;
    },
    error(data) {
      this.loading51 = false;
      this.loading52 = false;
      this.loading53 = false;
      this.$Message.error("上传失败");
    },
    progress1() {
      this.loading51 = true;
    },
    progress2() {
      this.loading52 = true;
    },
    progress3() {
      this.loading53 = true;
    },
    delMusic(params){
      this.$Modal.confirm({
        title: "提示",
        content:
          "<p>确定要删除此音频吗？</p>",
        onOk: () => {
          this.loading3 = true;
          this.$http(
            "/stage/exhibits/deleteExhibitsAudio",
            {
              id: params.row.id
            },
            "get",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("删除音频成功");
                this.getExhibitsAudios()
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading3 = false;
            }
          );
        },
        onCancel: () => {}
      });
    },
    submitMusic(){
      if(this.musicData.audioName == ''){
        this.$Message.error('音频标题不能为空');
        return false
      }
      if(this.musicData.audioLang == ''){
        this.$Message.error('语言类型不能为空');
        return false
      }
      if(this.musicData.audioUrl == ''){
        this.$Message.error('需要上传音频');
        return false
      }
      this.loading6 = true;
      if(this.musicModalId == ''){
        this.$http(
          "/stage/exhibits/saveExhibitsAudio",
          {
            audioDuration: this.musicData.audioDuration,
            audioLang: this.musicData.audioLang,
            audioName: this.musicData.audioName,
            audioUrl: this.musicData.audioUrl,
            exhibitsId: this.exhibitsId,
            museumId: this.museumId
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.$Message.success("上传音频成功");
              this.musicModal = false
              this.createModal = false
              this.getExhibitsAudios()
            } else {
              this.$Message.error(res.data.msg);
            }
            this.loading6 = false;
          }
        );
      }else{
        this.$http(
          "/stage/exhibits/updateExhibitsAudio",
          {
            audioDuration: this.musicData.audioDuration,
            audioLang: this.musicData.audioLang,
            audioName: this.musicData.audioName,
            audioUrl: this.musicData.audioUrl,
            id: this.musicModalId
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.$Message.success("修改音频成功");
              this.musicModal = false
              this.createModal = false
              this.getExhibitsAudios()
            } else {
              this.$Message.error(res.data.msg);
            }
            this.loading6 = false;
          }
        );
      }
    },
    getExhibitsAudios(){
      this.loading3 = true
      this.$http("/stage/exhibits/getExhibitsAudios",{
          exhibitsId: this.exhibitsId
        },"get",res => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].audioDuration2 = res.data.data[i].audioDuration + "s";
              if(res.data.data[i].audioLang == 'Chinese'){res.data.data[i].audioLang2 = '中文'}
              if(res.data.data[i].audioLang == 'English'){res.data.data[i].audioLang2 = '英文'}
              if(res.data.data[i].audioLang == 'Japanese'){res.data.data[i].audioLang2 = '日文'}
              if(res.data.data[i].audioLang == 'Korean'){res.data.data[i].audioLang2 = '韩文'}
            }
            this.data2 = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading3 = false;
        }
      );
    },
    addMusic(){
      this.createModal = true
      this.musicData = {
        audioDuration: 0,
        audioLang: "",
        audioName: "",
        audioUrl: "",
      }
      this.musicModalId = ''
    },
    beforeAvatarUpload(file){
      const isLt10M = file.size / 1024 / 1024 < 5;
      if (!isLt10M) {
        this.$Message.error("上传音频大小不能超过 5MB!");
      }
      return isLt10M;
    },
    listenChange(data){
      this.musicData = {
        audioDuration: data.row.audioDuration,
        audioLang: data.row.audioLang,
        audioName: data.row.audioName,
        audioUrl: data.row.audioUrl,
      }
      this.audioUrl1 = data.row.audioUrl
      this.createModal = true
      this.musicModalId = data.row.id
    },
    lookImg(data){
      this.modelImg = true
      this.modelImgSrc = this.prefix + data
    },
    muchLan(params){
      this.title = params.row.name
      this.lanModal = true
    },
    text2(){
      this.$Notice.open({
        title: '展品图片文件命名格式',
        render: h => {
            return h('div',{
              style:{
                'line-height': '30px'
              }
            }, [
                h('h3', '展品编号-图片名称'),
                h('h5', '例如：'),
                h('h5', 'bw0001-picName1'),
                h('h5', 'bw0002-picName2'),
                h('h5', 'bw0003-picName3'),
            ])
        }
      });
    },
    text1(){
      this.$Notice.open({
        title: '展品音频文件命名格式',
        render: h => {
            return h('div',{
              style:{
                'line-height': '30px'
              }
            }, [
                h('h3', '展品编号-语言类型-音频文件名称'),
                h('h5', '中文音频举例：'),
                h('h4', 'bw0001-zh-0001'),
                h('h5', '英文音频举例：'),
                h('h4', 'bw0002-en-0002'),
                h('h5', '日文音频举例：'),
                h('h4', 'bw0003-ja-0003'),
                h('h5', '韩文音频举例：'),
                h('h4', 'bw0003-ko-0003'),
            ])
        }
      });
    },
    onSelectionChange(data){
      this.selectList = data
    },
    changeCengji(){
      this.pilianghallId = ''
      this.modalCengji = true
    },
    submitCengji(){
      if(this.pilianghallId == ''){
        this.$Message.error("请选择层级");
        return false
      }
      let exhibitsId = []
      for(let i=0;i<this.selectList.length;i++){
        exhibitsId.push(this.selectList[i].id)
      }
      this.loadingCengji = true
      
      this.$http("/stage/exhibits/batchUpdateExhibitionHallId",{
          exhibitionHallId: this.pilianghallId,
          exhibitsId: exhibitsId
        },"post",res => {
          if (res.data.code == 200) {
            this.selectList = []
            this.$Message.success('修改成功');
            this.getData()
            this.modalCengji = false
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loadingCengji = false;
        }
      );
    },
    delZhanpin(){
      let exhibitsId = []
      for(let i=0;i<this.selectList.length;i++){
        exhibitsId.push(this.selectList[i].id)
      }
      this.$Modal.confirm({
        title: "提示",
        content:
          "<p>确定要删除所选展品吗？</p>",
          onOk: () => {
          this.$http(
            "/stage/exhibits/batchDeleteExhibits",
            {
              ids: exhibitsId
            },
            "post",
            res => {
              if (res.data.code == 200) {
                this.selectList = []
                this.$Message.success("删除展品成功");
                this.getData()
              } else {
                this.$Message.error(res.data.msg);
              }
            }
          );
        },
        onCancel: () => {}
      });
    },
    ZhanpinCode(){
      this.loadingCode = true
      let exhibitsId = []
      for(let i=0;i<this.selectList.length;i++){
        exhibitsId.push(this.selectList[i].id)
      }
      let that = this
      axios({
        method: 'post',
        url: this.baseUrl + '/stage/qrCode/exportExhibitQRCode',
        headers: {
          "token": this.$store.state.token || localStorage.getItem('token') || '',
          "Content-Type": "application/json;charset=UTF-8",
        },
        responseType: 'blob', 
        data:{
          ids: exhibitsId,
          appMuseumId: this.museumId
        }
      }).then(function(res){
        that.loadingCode = false
        let filename = res.headers['content-disposition'].split('filename=')[1]
        let blob = new Blob([res.data], {
          type: "application/x-zip-compressed"
        })
        let objectUrl = URL.createObjectURL(blob)
        let a = document.createElement("a")
        a.href = objectUrl
        a.download = decodeURI(filename)
        a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))
        window.URL.revokeObjectURL(blob)

      }).catch(resp => {
          that.loadingCode = false
      })

    },

  }
};
</script>

<style scoped>
  
</style>